import React, {PureComponent} from 'react';
import {Form, Icon, Input, InputNumber, Modal} from 'antd';
import ICOModal from './ICOModal'

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 15},
  },
};

@Form.create()
export default class MenuModal extends PureComponent {

  state = {
    iocModalVisible: false,
    icon:''
  };

  componentDidMount() {
    const {modalVisible, modalType, items} = this.props;
    if(modalVisible){
      if (modalType === 'edit') {
        this.setState({icon: items.icon})
      }
    }
  }

  handleOk = () => {
    const {form, handleSave} = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      handleSave(values, form);
    })
  }

  showICOModal=()=>{
    this.setState({
      iocModalVisible:true
    })
  }

  handleICOModalCancel=(icon)=>{
    this.setState({
      iocModalVisible:false,
      icon:icon
    })
  }

  render() {
    const {form: {getFieldDecorator}, items, modalType, modalVisible, handleModalCancel} = this.props;
    const {iocModalVisible, icon} = this.state;

    return (
      <div>
        <Modal
          title={modalType === 'add' ? '新增菜单' : '修改菜单'}
          visible={modalVisible}
          onOk={this.handleOk}
          onCancel={handleModalCancel}
        >
          <Form>
            {getFieldDecorator('parentId', {
              initialValue: items.parentId,
            })(
              <Input hidden={true}/>
            )}
            {getFieldDecorator('id', {
              initialValue: items.id,
            })(
              <Input hidden={true}/>
            )}
            <FormItem
              {...formItemLayout}
              label="上级菜单"
            >
              <span>{items.parentName}</span>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="菜单名称"
            >
              {getFieldDecorator('name', {
                initialValue: items.name,
                rules: [{
                  required: true, message: '请输入菜单名称',
                }],
              })(
                <Input placeholder="请输入菜单名称"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="编号"
            >
              {getFieldDecorator('code', {
                initialValue: items.code,
                rules: [{
                  required: true, message: '请输入菜单编号',
                }],
              })(
                <Input placeholder="请输入菜单编号"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="图标"
            >
              {getFieldDecorator('icon', {
                initialValue: icon,
                rules: [{
                  required: true, message: '请选择图标',
                }],
              })(
                <Input readOnly={true} prefix={icon&&<Icon type={icon} style={{color:'#faad14'}} />} addonAfter={<a onClick={this.showICOModal}><Icon type="setting" /></a>} placeholder="请选择图标" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="路由路径"
            >
              {getFieldDecorator('path', {
                initialValue: items.path,
                rules: [{
                  required: true, message: '请输入菜单路径',
                }],
              })(
                <Input placeholder="请输入菜单路径"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="排序"
            >
              {getFieldDecorator('sortNo', {
                initialValue: items.sortNo,
                rules: [{
                  required: true, message: '请输入排序',
                }],
              })(
                <InputNumber style={{width:'100%'}} placeholde="请输入排序" min={1} precision={0}/>
              )}
            </FormItem>
          </Form>
        </Modal>
        <ICOModal
          key={Date.now()+'_ICO'}
          icon={icon}
          modalVisible={iocModalVisible}
          handleCancel={this.handleICOModalCancel}
        />
      </div>
    );
  }
}
